<template>
  <div class="login-container">
     <div class="nav">
       <h1>外卖APP</h1>
       <div class="nav-bar-container">
         <span @click="LoginType=0" class ='logintype-bar'  :class="[LoginType ? '' : 'active']">密码登录</span>
         <span @click="LoginType=1" class ='logintype-bar' :class="[LoginType ? 'active' : '' ]">短信登录</span>
       </div>
     </div>
    <div class="content-container">
        <div style="position:relative;"><input class= 'all' type="number" :placeholder="LoginType ? '手机号' : '手机号/用户名/邮箱'" v-model="phone"><button v-if="LoginType" :disabled='Isdisable' class="btn" @click="getVi($event)">{{btnContent}}</button></div>
        <input v-if="!LoginType" class= 'all' type="text" placeholder="密码" ref="password">
        <div style="position:relative;"><input class= 'all' type="text" placeholder="验证码"  ref="vcode"><img v-if="!LoginType" class="btn" @click="changeSVG" src="http://localhost:4000/captcha"></img></div>
        <div class="tip" v-if="LoginType">温馨提示：如果是未注册的账号，登录是将默认注册，代表用户已经同意用户协议<span style='color:green'>《外卖用户协议》</span></div>
    </div>
    <div class="button-container">
        <button class="all btn" @click="checkin">登录</button>
        <span class="all span">关于我们</span>
    </div>
  </div>
</template>
<script>
import {mapActions} from 'vuex'
import Ajax from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      btnContent: '获取验证码',
      isCheck: 0,
      LoginType: 0,
      phone: ''
    }
  },
  methods: {
    ...mapActions([
      'store_user'
    ]),
    checkin: function () {
      if (this.LoginType) {
        // 手机验证码登录
        // 前端验证这里忽略
        // console.log(this.$refs.vcode.value)
        let result = Ajax.post('/api/login_sms', {phone: this.phone, code: this.$refs.vcode.value}).then(response => {
          console.log(result.data)
        }).catch(err => {
          console.log('err', err)
        })
        console.log('这个接口坏了，换方式登录吧',this.phone)
      } else {
        // 密码登录
        // 前端验证这里忽略
        let name = this.phone
        let pwd  = this.$refs.password.value
        let captcha = this.$refs.vcode.value
        console.log('登录发送请求，',name,pwd,captcha)
        //发送请求登录
        if(name&&pwd&&captcha){
          let result = Ajax({
            url: '/api/login_pwd',
            data: {name,pwd,captcha},
            method: 'POST'
          })
          .then((res) => {
              if(res.data.code === 0){
                console.log('登录成功')
                //存储用户信息，跳转界面
                console.log(res.data.data)
                //this.$store.dispatch('store_user',res.data.data)
                this.store_user(res.data.data)
                this.$router.replace('/personal')
              } else{
                console.log('信息错误，请核对表单数据')
              }
          })
          .catch((err) => {
            console.log('出错了',err)
          })
        } else {
          console.log('表单不能为空')
        }
      }
    },
    // 获取手机验证码
    getVi: function (event) {
      // 控制验证码新获取的时间
      let i = 3
      let tid = setInterval(() => {
        // 放在上面就无法修改data
        // 必须放在下面
        /*  if (i === 0) {
          this.isCheck = 0
          this.btnContent = 'ggg'
          clearInterval(tid)
          console.log("ffffff")
        } */
        this.btnContent = `(${i--}秒后重新获取)`
        this.isCheck = 1
        if (i === 0) {
          this.isCheck = 0
          this.btnContent = '获取验证码'
          clearInterval(tid)
        }
      }, 1000)
      // 请求验证码
      let vcode = Ajax({method: 'get', url: '/api/sendcode', params: {phone: this.phone}}).then(response => {
        console.log('发送成功收到的返回数据', vcode.data)
      }).catch(err => {
        console.log('error', err)
      })
    },
    // 点击图片重新加载验证码
    changeSVG: function (event) {
      // 点击图片修改路径就可以实现图片的重新加载，如果不切换路径会使用浏览器缓存，就不会重新发请求
      event.target.src = 'http://localhost:4000/captcha?timestamp' + new Date()
    }
  },
  computed: {
    ismatch: function () {
      let mat = /^1\d{10}$/
      return !mat.test(this.phone)
    },
    Isdisable: function () {
      return (this.ismatch || this.isCheck) ? true : false
    }
  }
}
</script>
<style lang="less" scoped>
  .login-container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .nav{
        width: 60%;
        margin: 20px auto;
        text-align: center;
        h1{
          font-size: 30px;
          color: chartreuse;
        }
        .nav-bar-container{
          width: 100%;
          margin: 20px auto;
          display: flex;
          .logintype-bar{
            flex: 1;
          }
          .active{
            border-bottom: black;
            color: chartreuse;
          }
        }
      }
  .content-container{
    width: 80%;
    margin: 0 auto;
    input {
      background: none;
      outline: none;
      border: none;
    }

    .all{
      width:100%;
      display: block;
      height: 30px;
      margin-top: 10px;
      border: cyan 1px solid;
      border-radius: 5px;
    }
    .tip{
      font-size: 15px;
      color: darkgrey;
      text-align: left;
      height: 60px;
      line-height: 20px;
    }
    .btn{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto 0;
    }
  }
  .button-container{
    width: 80%;
    margin: 0 auto;
    .all{
      display: block;
      width: 100%;
      margin-top: 10px;
      height: 30px;
      text-align: center;
      font-size: 14px;
    }
    .btn{
      background-color: greenyellow;
      border-radius: 5px;
      color: wheat;
      border: none;
    }
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
      outline: none;
      border-color: transparent; // 若是本身具有 border 请删除此属性
      box-shadow:none;
    }
  }
</style>
